:root { 
    --primary-color: #6ec3c1; 
    --secondary-color: #819ff39f; 
    --accent-color: #fce38a; 
    --light-color: #eaffd0; 
    --dark-color: #333; 
    --white: #fff; 
    --shadow: 0 4px 15px rgba(0,0,0,0.1); 
    --blur-bg: rgba(255,255,255,0.8); 
}

* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

body { 
    font-family:'Noto Sans SC',sans-serif; 
    background:#f9f9f9; 
    color:var(--dark-color); 
    line-height:1.6; 
}

.navbar { 
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); 
    padding:15px 30px; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    box-shadow:var(--shadow); 
    color:var(--white); 
}

.navbar img { 
    height:40px; 
}

.user-info { 
    display:flex; 
    align-items:center; 
    gap:20px; 
}

.user-info span { 
    font-weight:500; 
}

.user-info button { 
    background:var(--white); 
    color:var(--primary-color); 
    border:none; 
    padding:8px 15px; 
    border-radius:20px; 
    cursor:pointer; 
    font-weight:500; 
    transition:all .3s; 
}

.user-info button:hover { 
    background:var(--light-color); 
    transform:translateY(-2px); 
}

.container { 
    display:flex; 
    min-height:calc(100vh - 70px); 
}

.sidebar { 
    width:220px; 
    background:var(--white); 
    padding:20px 0; 
    box-shadow:var(--shadow); 
}

.sidebar ul { 
    list-style:none; 
}

.sidebar a { 
    display:block; 
    padding:12px 25px; 
    color:var(--dark-color); 
    text-decoration:none; 
    border-left:4px solid transparent; 
    transition:all .3s; 
}

.sidebar a:hover { 
    background:rgba(110,195,193,0.1); 
    border-left:4px solid var(--primary-color); 
    color:var(--primary-color); 
}

.main-content { 
    flex:1; 
    padding:30px; 
    background:#f5f7fa; 
}

.dashboard { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); 
    gap:20px; 
    margin-bottom:30px; 
}

.card { 
    background:var(--white); 
    border-radius:10px; 
    padding:20px; 
    box-shadow:var(--shadow); 
    transition:transform .3s; 
}

.card:hover { 
    transform:translateY(-5px); 
}

.card h3 { 
    color:var(--primary-color); 
    margin-bottom:15px; 
    padding-bottom:10px; 
    border-bottom:1px solid #eee; 
}

.card button { 
    background:var(--primary-color); 
    color:#fff; 
    border:none; 
    padding:8px 15px; 
    border-radius:5px; 
    margin-right:10px; 
    cursor:pointer; 
    transition:all .3s; 
}

.card button:hover { 
    background:var(--secondary-color); 
    transform:translateY(-2px); 
}

.experiment-table { 
    width:100%; 
    border-collapse:collapse; 
    background:var(--white); 
    box-shadow:var(--shadow); 
    border-radius:10px; 
    overflow:hidden; 
}

.experiment-table th, 
.experiment-table td { 
    padding:12px 15px; 
    text-align:left; 
    border-bottom:1px solid #eee; 
}

.experiment-table th { 
    background:var(--primary-color); 
    color:#fff; 
    font-weight:500; 
}

.experiment-table tr:hover { 
    background:rgba(110,195,193,0.1); 
}

.action-button { 
    background:var(--accent-color); 
    color:var(--dark-color); 
    border:none; 
    padding:6px 12px; 
    border-radius:5px; 
    cursor:pointer; 
    transition:all .3s; 
}

.action-button:hover { 
    background:var(--secondary-color); 
    color:#fff; 
    transform:translateY(-2px); 
}

.floating-btn { 
    position:fixed; 
    bottom:30px; 
    right:30px; 
    width:60px; 
    height:60px; 
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); 
    border-radius:50%; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#fff; 
    font-size:24px; 
    box-shadow:0 5px 15px rgba(0,0,0,0.2); 
    cursor:pointer; 
    z-index:101; 
    transition:all .3s; 
}

.floating-btn:hover { 
    transform:scale(1.1) translateY(-5px); 
    box-shadow:0 8px 20px rgba(0,0,0,0.3); 
}

.upload-container { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.5); 
    z-index:1000; 
}

.upload-box { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background:var(--blur-bg); 
    backdrop-filter:blur(10px); 
    padding:30px; 
    border-radius:15px; 
    width:500px; 
    max-width:90%; 
    box-shadow:0 10px 30px rgba(0,0,0,0.2); 
    text-align:center; 
    cursor:move; 
}

.upload-header { 
    padding:15px 20px; 
    margin:-30px -30px 20px -30px; 
    border-radius:15px 15px 0 0; 
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); 
    color:#fff; 
    cursor:move; 
    user-select:none; 
}

.upload-box h2 { 
    color:#000; 
    margin-bottom:20px; 
}

.preview-container { 
    width:100%; 
    height:250px; 
    border:2px dashed var(--primary-color); 
    border-radius:10px; 
    margin-bottom:20px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden; 
    position:relative; 
    transition:background .3s, border-color .3s; 
}

.preview-container.dragover { 
    background:rgba(110,195,193,0.1); 
    border-color:#5db3b1; 
}

.preview-placeholder { 
    color:var(--primary-color); 
    font-size:16px; 
}

.preview-container img, 
.preview-container video { 
    max-width:100%; 
    max-height:100%; 
    display:none; 
}

.upload-buttons { 
    display:flex; 
    justify-content:space-between; 
}

.file-input { 
    display:none; 
}

.select-file-btn, 
.upload-btn { 
    padding:10px 20px; 
    border:none; 
    border-radius:30px; 
    cursor:pointer; 
    font-weight:500; 
    transition:all .3s; 
    font-size:16px; 
}

.select-file-btn { 
    background:var(--primary-color); 
    color:#fff; 
}

.select-file-btn:hover { 
    transform:translateY(-2px); 
}

.upload-btn { 
    background:var(--secondary-color); 
    color:#fff; 
}

.upload-btn:hover { 
    transform:translateY(-2px); 
}

.close-btn { 
    position:absolute; 
    top:15px; 
    right:15px; 
    background:none; 
    border:none; 
    font-size:20px; 
    color:var(--secondary-color); 
    cursor:pointer; 
}

@media(max-width:768px){ 
    .container{flex-direction:column;} 
    .sidebar{width:100%;padding:10px 0;} 
    .sidebar ul{display:flex;overflow-x:auto;} 
    .sidebar a{padding:10px 15px;border-left:none;border-bottom:3px solid transparent;} 
    .sidebar a:hover{border-bottom:3px solid var(--primary-color);} 
}

 /* 动画效果 */
 @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .experiment-table {
    animation: fadeIn 0.5s ease-out;
}

/* 浮动元素 */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}